import React,{Component,useState}from 'react'

//两种常用组件定义方式

/*
    一、类组件(目前市场上用的比较少)
    必须要有视图结构，所以render()必须存在有返回值.

    类组件中有生命周期、有this、有上下文、有ref、有state等等特性

    正因为类组件啥都有，使用相对于函数式组件，它的性能较差，因此目前市场中越来越少使用了.

    无论是类组件还是函数式组件，都有props。在类组件中，使用this来访问
*/
class TestComponent1 extends Component{
    constructor(props){
        super(props)
        this.state={
            count:1
        }
    }
    //自增
    add(){
        //修改count这个声明式变量，触发render返回一个新的jsx对象，通过diff运算找到赃节点，react只更新区别
        this.setState(state=>({count:state.count+1}))
    }
    render(){
        //测试打印类组件的各种特性
        console.log('this',this);
        console.log('refs',this.refs);
        console.log('state',this.state);
        console.log('context',this.context);
        return (
            <div>
                <h1 ref='junbao'>我是类组件</h1>
                <h2>{this.state.count}</h2>
                <button onClick={() => this.add()}>自增</button>
            </div>
        )
    }
}


/*
    二、函数式组件(目前市场上用的比较多)(无状态组件)
    函数式本质是一个js函数，他的入参是props，它的返回值是JSX视图结构，并且一定要有返回值
    函数式组件可以使用function关键字来定义，也可以使用箭头函数

    函数式组件中啥都没有，没有生命周期、没有this、没有上下文、没有ref、没有state

    正因为函数式组件啥也没有，所以相对类组件来说，它的性能更好。因此被工作中用的越来越多

    函数式组件虽然性能较好，但什么都没有导致开发不方便，怎么办？从react v16.8新增了很多Hooks Api来解决这个问题。

    历史，在16.8以前，我们写React项目时可以同时使用类组件和函数式组件，经常写着写着，把函数式组件又改变成类组件。

    在函数式组件中，因为函数的默认参数就是props，所以可以直接使用

*/
function TestComponent2(props){
    return (
        <div>
            <h1>我是函数式组件</h1>
        </div>
    )
}

const TestComponent4=props=>{
    //是useState模拟类组件中的声明式变量
    //setCount用来修改count
    let [count,setCount]=useState(1)
    return (
        <div>
            <h1>我是函数式组件</h1>
            <h2>{count}</h2>
            <button onClick={() => setCount(count+1)}>自增</button>
        </div>
    )
}

export default TestComponent1